<template>
    <header>
        <nav class="navbar site-nav navbar-inverse navbar-static-top navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <router-link to="Admin" class="navbar-brand">装修平台</router-link>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">工人网采</a></li>
                        <li><a href="#">设计师</a></li>
                        <li><a href="#">工地展示</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">在线下单 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a @click="show_calc" href="#">工人</a></li>
                                <li><a @click="show_calc" href="#">设计师</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">客户增值服务 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">工人</a></li>
                                <li><a href="#">设计师</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    toggle_if_show_calc: {
      type: Function
    }
  },
  methods: {
    show_calc () {
      this.toggle_if_show_calc()
    }
  }
}
</script>

<style scoped>
    header {
        position: relative;
        z-index: 1;
    }

    .site-nav {
        font-weight: bold;
        color: #007bff;
        background-color: #ff5900;
        border-bottom: 1px solid #ff5900;
    }

    .site-nav a {
        font-weight: bold;
        color: #fff;
    }

    .btn-search:hover {
        background-color: #eee !important;
    }
</style>
